<!DOCTYPE html>
<html>
  <head>
    <title>iframe-index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../layui/css/layui.css" type="text/css"></link>
    <link rel="stylesheet" href="../css/util/page_head_main.css" type="text/css"></link>
       	<script type="text/javascript" src="../js/util/jquery.js"></script>
     <script type="text/javascript" src="../js/util/FrameOption.js"></script>
     <!-- <script type="text/javascript" src="http://echarts.baidu.com/examples/vendors/jquery/jquery.js"></script> -->
     <script type="text/javascript" src="../layui/layui.js"></script>
   <!--   <script src="http://mockjs.com/dist/mock.js"></script> -->
 	 	<script type="text/javascript" src="../js/util/arttemplate.js"></script>
  
	<script type="text/javascript" src="../js/util/page_head_main.js"></script>
	<style>
		 .button-sub-value{
		 		width: 300px;
		 		height: 50px;
		 		background-color: white;
		 		border: 1px solid lightgray;
		 		margin-top: 20px;
		 		border-top: 0px;
		 		border-left: 0px;
		 		border-right: 0px;
		 		border-bottom: 1px solid royalblue;
		 }
		 .button-sub-color{
		 		width: 80px;
		 		height: 50px;
		 		border: 1px solid lightgray;
		 		border-bottom: 1px solid royalblue;
		 }
		 .button-sub-delete{
		 	background-color:#93D1FF;
		 	width: 50px;
		 	height: 30px;
		 	border: 0px solid white;
		 	cursor:pointer;
		 }
		  .button-sub-add{
		 	background-color:#FFB800;
		 	width: 80px;
		 	height: 30px;
		 	border: 0px solid white;
		 	cursor:pointer;
		 }
		
	</style>
 	</head>
  
  <body style="background-color: white;" >
   <div style="width: 100%;float: left;">
		<div class="row-div-mian" id="headDiv"></div>
 	</div>
  
  <div style="width: 100%;float: left; min-width:1200px;">
		<div style="width: 100%;align-content: center;">
			<div style="margin-left: 50%;color: #1E9FFF;"> 
				 
			</div>
		</div>
  </div>
   <div style="width: 100%;float: left; min-width:1200px;margin-top: 10px;"  >
      <div style="width: 90%;" >
  			 <div style="width: 100px;margin-left: 30%;color: red;"> </div>
  		</div>
      <div style="" id="divRex">
      	
      </div>
      <hr />
  </div>
  <div style="width: 100%;float: left; min-width:1200px;margin-top: 10px;" >
  	<a href="http://www.atool.org/colorpicker.php">顔色對照表</a>
  </div>
  
  <div style="width: 100%;float: left; min-width:1200px;margin-top: 10px;"  >
      <div style="width: 90%;" >
  			 <div style="width: 100px;margin-left: 30%;color: red;">文本測試</div>
  		</div>
      <div style="" >
      	<p id="divRexText">
      	2018-06-20 12:30:17 WARN HibernatePersistence:58 - HHH015016: Encountered a deprecated javax.persistence.spi.PersistenceProvider [org.hibernate.ejb.HibernatePersistence]; use [org.hibernate.jpa.HibernatePersistenceProvider] instead. 
六月 20, 2018 12:30:20 下午 org.apache.catalina.startup.HostConfig deployDirectory 
信息: Deployment of web application directory D:\DevelopTools\home\tomcat\apache-tomcat-7.0.82\webapps\YP-ResourceApi has finished in 6,993 ms 
六月 20, 2018 12:30:20 下午 org.apache.coyote.AbstractProtocol start 
 信息: Command line argument: -Dfile.encoding=GBK 
六月 20, 2018 12:30:05 下午 org.apache.catalina.core.AprLifecycleListener lifecycleEvent 
信息: The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: C:\Program Files\Java\jdk1.7.0_79\bin;C:\WINDOWS\Sun\Java\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\Program Files\Java\jdk1.7.0_79\jre\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\AOMEI Backupper;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Java\jdk1.7.0_79\bin;C:\Program Files\MySQL\MySQL Utilities 1.6\;C:\Program Files\nodejs\;C:\Users\duyong\AppData\Local\Microsoft\WindowsApps;C:\Users\duyong\AppData\Roaming\npm;. 
六月 20, 2018 12:30:05 下午 org.apache.coyote.AbstractProtocol init 
信息: Initializing ProtocolHandler ["http-bio-8080"] 
六月 20, 2018 12:30:05 下午 org.apache.coyote.AbstractProtocol init 
信息: Initializing ProtocolHandler ["ajp-bio-8009"] 
六月 20, 2018 12:30:05 下午 org.apache.catalina.startup.Catalina load 
信息: Initialization processed in 640 ms 
六月 20, 2018 12:30:05 下午 org.apache.catalina.core.StandardService startInternal      	
D:/DevelopTools/home/tomcat/apache-tomcat-7.0.82/webapps/YP-ResourceApi 
      	</p>
      </div>
      <hr />
  </div>
  </body>
   
  <script type="text/html" id="templateHead">
			<span >
				 <a href="javascript:void(0)" onclick="clickServers()" style="color: #999!important;">日志管理</a>-
				 <a href="#" > <$=data$></a>
				 <a href="" style="margin-left: 5px;">
				  	<i class="layui-icon layui-anim layui-anim-rotate ">ဂ</i>
				 </a> 
			</span>
	</script>
	 
	
	<script type="text/html" id="templateRex">
		<$var name="rulesInfo-rex"; $>
			<div style="width: 60%;margin-top: 10px;">
					<span style="margin-left: 10px;margin-top: 10px;">
			 			<input type="text" value="" id="addRex" class="button-sub-value" />		
			 			<input type="text" value="" id="addSubColor" class="button-sub-color" />	
			 			<button onclick="addRuleDivContext('<$=name$>','addRex','addSubColor')" class="button-sub-add">新增規則</button>
			 	</span>
			 </div>
			 <div >
			 	<$for(var i=0;i<data.length;i++){$>
			 			<$if(i%3==0&&i!=0){$>
			 				<span style="margin-left: 10px;margin-top: 10px;">
			 					<input type="text" value="<$=data[i]$>"  disabled="disabled" id="rex-id-<$=i$>" class="button-sub-value"/>
			 					<input type="button" value="刪除" onclick="deleteRuleData('<$=name$>',document.getElementById('rex-id-<$=i$>').value)" class="button-sub-delete"/>
			 				</span>
			 					</br>
			 				<$}else{$>
			 			 		<span style="margin-left: 10px;margin-top: 10px;">
			 			 			<input type="text" value="<$=data[i]$>"  disabled="disabled" id="rex-id-<$=i$>" class="button-sub-value"/>
			 			 			<input type="button" value="刪除" onclick="deleteRuleData('<$=name$>',document.getElementById('rex-id-<$=i$>').value)" class="button-sub-delete"/>
			 			 		</span>		
			 					<$}$>
			 	<$}$>
			 </div>
	</script>
   <script type="text/javascript">
 		head({data:"規則設置"});	
   </script>
    <script >
    	loadLocalStorage();
    	
    	function loadLocalStorage(){
    		 //window.localStorage.setItem("rulesInfo-sub","");
    		//showTemplateDiv("rulesInfo-sub",'templateSub','divSub');
    		//showTemplateDiv("rulesInfo-contains",'templateContains','divContains');
    		showTemplateDiv("rulesInfo-rex",'templateRex','divRex');
    		loadColorRex();
    	}
    	
    	function loadColorRex(){
	    	var rulesData=queryRuleData("rulesInfo-rex");
	    	if(rulesData!=null&&rulesData.length>0){
	    		var textHtml=document.getElementById("divRexText").innerHTML;
	  			for(var i=0;i<rulesData.length;i++){
	  				 var rexValColor=rulesData[i];
	  					var arr=rexValColor.split(">");
	  					if(arr.length==2){
	  						var rexVal=arr[0];
	  						var rexColor=arr[1];
	  						var rexValreplace=rexVal.replace(/\\/g,"\\\\");
	  							//	rexValreplace=rexVal.replace(/\//g,"\\\\");
			  						try{  
											var rexReg=new RegExp(rexValreplace,"gm");
												textHtml=	textHtml.replace(rexReg, "<span style='color:"+rexColor+"'>"+rexVal+"</span>")
											}catch(e){  
											 	console.log(rexVal+':无效正则');
											}
	  					}
	  			}
	  			document.getElementById("divRexText").innerHTML=textHtml;
	    	}
    	}
    
    function showTemplateDiv(str,templateId,divId){
    	var rulesData=queryRuleData(str);
    		var val=initTemplateData(rulesData);
    		initTemplate(templateId,val,divId);
    	
    }
   function initTemplateData(rulesData){
    		return {data:rulesData};
   }
   
    function initTemplate(str,objectVal,divId){
    	var html1 = template(str, objectVal);
 		 		document.getElementById(divId).innerHTML = html1;
    }
    	
   function addRuleDivContext(str,id,color){
   		var rulesData=queryRuleData(str);
	    	var subValue= document.getElementById(id).value;
	    	var subColor=document.getElementById(color).value;
	    	if(subValue!=""&&subValue!=null){
	    		if(subColor!=""&&subColor!=null){
	    			var subObj={val:subValue,color:subColor};
       		 setRuleData(str,subObj,rulesData);
	    		}
	    	}
    		loadLocalStorage();
   }
    	
    function arrayOnly(arr){
    	var temp = [];  
	    for(var i = 0; i < arr.length; i++){
	        if(temp.indexOf(arr[i]) == -1){
	            temp.push(arr[i]);
	        }
	    }
    return temp;
	}
    
    function deleteRuleData(str,val){
    	var arr = queryRuleData(str);
			var index = arr.indexOf(val);
			if (index > -1) {
			    arr.splice(index, 1);
			}
			setRuleData(str,null,arr);
			loadLocalStorage();
    }

		function queryRuleData(str){
			var rulesInfo = window.localStorage.getItem(str);
    		var rulesData=new Array();
    		if(rulesInfo!=""&&rulesInfo!=null){
    			rulesData=JSON.parse( rulesInfo );
    		}
			return rulesData;
		}
		
		function setRuleData(str,val,rulesData){
			 if(val!=""&&val!=null){
			 	var subVal=val.val;
			 	var subColor=val.color;
			 	var subvc=subVal.trim()+">"+subColor.trim();
       		rulesData.push(subvc);
       }
			 rulesData=	arrayOnly(rulesData);
			 var arrs=JSON.stringify(rulesData);
    		 window.localStorage.setItem(str,arrs.toString());
		}
    	
    </script>
</html>
